import { Label } from "@renderer/components/ui/base/field";
import { useTranslation } from "react-i18next";
import packageJson from "../../../../../package.json";

const { version } = packageJson;

export function DataVersion() {
  const { t } = useTranslation("translation", {
    keyPrefix: "settings.data-settings",
  });

  return (
    <div className="flex flex-col gap-2">
      <Label className="text-label-fg">{t("version.title")}</Label>

      <div className="flex min-h-[44px] items-center justify-between gap-x-10 rounded-[10px] bg-setting px-3.5 py-1.5">
        <div className="flex items-center gap-2 text-sm">
          <span className="text-setting-fg">{t("version.current")}:</span>
          <span className="font-mono text-muted-fg">{version}</span>
        </div>
      </div>
    </div>
  );
}
